body {
	cursor: default;
	margin: 0px;
	padding: 0px;
	font-family: sans-serif;
}


#events {
	z-index:          10000;
	position:         fixed;
	top:              0px;
	left:             0px;
	width:            100%;
	height:           64px;
	background-color: #C0C0C0;
	border-width:     0px 0px 1px;
	border-style:     solid;
	border-color:     black;
	overflow:         hidden;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#808080), color-stop(5%, #a0a0a0), color-stop(95%, #c0c0c0), to(#e0e0e0));
}
#events .event {
	display:          block;
	width:            100%;
	position:         absolute;
	white-space:      nowrap;
	background-color: #E0E0E0;
	color:            #404040;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e0e0e0), color-stop(5%, #c0c0c0), color-stop(95%, #a0a0a0), to(#808080));
}
.event img {
	height:         64px;
	vertical-align: middle;
}

#eventqueue {
	position: absolute;
	top: 128px;
	left: 64px;
	visibility:hidden;
}


#messages {
	border:   1px solid black;
	position: fixed;
	top:      80px;
	w idth:   100%;
	padding:  16px;
	margin:   0px 16px;
	background-color: pink;
}
#messages .message {
	background-color: red;
}
#messageinput {
	width: 100%;
}


#selection {
	z-index:       10000;
	position:      fixed;
	top:           64px;
	width:         100%;
	min-width:     480px;
	text-overflow: ellipsis;
	white-space:   nowrap;
	overflow:      hidden;
}
#selection span {
	font-size: x-large;
	line-height: 64px;
	text-outline: 2px 2px #000000;
	text-shadow: -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white, 2px 2px 4px white;
}
#selection .left {
	float: left;
}
#selection .right {
	float: right;
}


#actions {
	z-index:     10000;
	position:    fixed;
	bottom:      0px;
	text-align:  center;
	width:       100%;
}
#actions ul {
	list-style-type: none;
	height:      64px;
	background -color: pink;
	margin:      0px;
	padding:     0px;
	min-width:   480px;
}
#actions ul li {
	display: inline-block;
	*display: inline;
	wid th:   64px;
	height:  64px;
}
#actions ul li:first-child {
	float: left;
}
#actions ul li:last-child {
	float: right;
}
#actions ul li div {
	position: absolute;
	bottom:   64px;
	width:    64px;
	text-shadow: -1px -1px 2px white, -1px 1px 2px white, 1px 1px 2px white, 1px -1px 2px white;
	text- shadow: -1px -1px white, -1px 1px white, 1px 1px white, 1px -1px white;
}

#actions ul li div#crackpoints {
	position:    fixed;
	bottom:      0px;
	mar gin-left: 64px;
	line-height: 64px;
	left:        64px;
}
#actions ul li div#commandpoints {
	position:    fixed;
	bottom:        0px;
	mar gin-left: -64px;
	mar gin-right: 64px;
	line-height:  64px;
	right:        64px;
}


img.button {
	width:  64px;
	height: 64px;
	bor der: 1px solid black;
	bor der-radius: 32px;
}
img.button:hover {
	background-color: pink;
}
div.label, span.label {
	color:       #808080;
	font-weight: bold;
	text-align:  center;
}

/*
#status {
	z-index: 20000;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -177px;
	width: 320px;
	height: 320px;
	padding: 16px;
	border: 1px solid black;

	background-color: #808080;
	color: white;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e0e0e0), color-stop(5%, #c0c0c0), color-stop(95%, #a0a0a0), to(#808080));
	border-radius: 32px;
}
#status h1 {
	font-size: x-large;
//	text-outline: 2px 2px #000000;
//	text-shadow: -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white, 2px 2px 4px white;
	text-align: center;
	mar gin: 16px 0px;
	margin: 0px 0px 16px;
}
#status p {
	margin: 16px 0px;
}
#status table {
	margin: 16px 0px;
	width: 100%;
	border-spacing: 0px;
}
#status th {
	text-align: left;
	padding: 0px;
	width: 64px;
}
#status td {
	padding: 0px;
}
#status img {
	pos ition: relative;
	bot tom: 0px;
	mar gin: 16px auto;
}
*/

#map {
	position: fixed;
	top:      50%;
	left:     50%;
	width:    0px;
}

#map .unit {
	position: absolute;
}

.unit .system {
	position: absolute;
	margin:   -64px;
	width:    128px;
}
.unit .selection {
	position: absolute;
	top:      64px;

//	margin:   -32px -64px;
//	width:    128px;
//	height:   64px;

	margin:   -64px -128px;
	width:    256px;
	height:   128px;
}
.unit .ship {
	position: absolute;
	bottom:   48px;
	margin:   0px -48px;
	width:    96px;
}
.unit .ships {
	position: absolute;
	width:    128px;
	height:   128px;
	margin:  -64px;
	white-space: nowrap;

	font-size: x-large;
	line-height: 128px;
	text-outline: 2px 2px #000000;
	text-shadow: -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white, 2px 2px 4px white;

	color:       #808080;
	font-weight: bold;
	text-align:  center;
}
.unit .label {
	position:    absolute;
	top:         64px;
	width:       256px;
	margin:      0px -128px;
	white-space: nowrap;
}

.unit .actions {
	pos ition: absolute;
}
.unit img.action {
	visibility: hidden;
	position: absolute;
	width: 64px;
	height: 32px;
	margin: 48px -32px 0px;
}
.selected img.action {
	visibility: visible;
}

.unit img:hover {
	background-color: pink;
}
